<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-menu"></i>商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>商品信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="crumbs">
            <el-col :span="12">
                <el-input placeholder="商品名称/编号/类别名 - 搜索" icon="search" v-model="params.keywords" :on-icon-click="handleSearch" @keyup.enter.native="handleSearch">
                </el-input>
            </el-col>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <el-col :span="8">
                <el-button type="info" @click="handleSearch()">搜索</el-button>
                <el-button type="info" @click="handleCreate()">新增商品</el-button>
                <el-button type="info" @click="removeParams()">清空条件</el-button>
            </el-col>
        </div>

        <!-- 筛选查询 -->
        <div class="crumbs">
            <el-collapse accordion>
                <el-collapse-item title="筛选查询" >
                    <div class="el-form-item">
                        <span class="el-form-item__label">商品状态:</span>
                        <el-select v-model="params.status" placeholder="选择状态">
                            <el-option label="设计中" value="DEVELOPING"></el-option>
                            <el-option label="已上架" value="UP_SHELF"></el-option>
                            <el-option label="已下架" value="DOWN_SHELF"></el-option>
                        </el-select>
                    </div>
                    <div class="el-form-item">
                        <span class="el-form-item__label">创建时间范围:</span>
                        <el-date-picker type="date" placeholder="选择日期" v-model="params.startTime" format="yyyy-MM-dd"></el-date-picker>
                        <el-date-picker type="date" placeholder="选择日期" v-model="params.endTime" format="yyyy-MM-dd"></el-date-picker>
                    </div>

                </el-collapse-item>
            </el-collapse>
        </div>
        <!-- 表格属性:
                            border 显示列边框 empty-text 无数据内容显示的文本；
                            stripe 斑马纹  highlight-current-row 选中高亮;
                            列属性：
                            show-overflow-tooltip 列过长显示缩略提示
                        -->
        <el-table :data="tableData" border style="width: 100%" height v-loading.body="listLoading" element-loading-text="小主请稍等,玩命加载中...">
            <el-table-column prop="serialNumber" label="编号" sortable show-overflow-tooltip></el-table-column>
            <el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="cateName" label="类别" show-overflow-tooltip></el-table-column>
            <el-table-column prop="count" label="数量"></el-table-column>
            <el-table-column prop="originPrice" label="定价(元)"></el-table-column>
            <el-table-column prop="sellPrice" label="售价(元)" show-overflow-tooltip></el-table-column>
            <el-table-column prop="status" label="状态">
                <template scope="scope">
                    <el-tag :type="handlerStatusStyle(scope.row)" close-transition>{{formatter(scope.row,scope.row.status)}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" :total="totalElements" :current-page="number" :page-size="size">
            </el-pagination>
        </div>
    </div>
</template>

<script>

import gooItemApi from '../../api/gooItemApi'
import dateUtils from '../../utils/dateUtils'
export default {

    data() {
        return {
            params: {
                keywords: null,
                status: null,
                startTime: null,
                endTime: null
            },
            tableData: [],
            number: 0,
            size: 10,
            totalPages: 0,
            totalElements: 0,
            listLoading: false,// 列表loading 加载标识 true 显示加载 false 不显示
        }
    },
    mounted() {
        this.loadData();
    },
    watch: {
        // tableSize: {
        //     handler: function () {
        //         console.log('数据发生了变动'+this.tableSize);
        //         this.loadData();
        //     },
        //     deep: true
        // }
    },
    methods: {
        removeParams() { //清空查询条件
            this.params = {
                keywords: null,
                status: null,
                startTime: null,
                endTime: null
            };
        },
        handleSearch() { //搜索
            this.loadData();
        },

        handleCurrentChange(val) { //分页触发列表数据变动
            this.number = val;
            this.loadData();
        },
        //加载商品列表数据
        loadData() {
            this.listLoading = true;
            const page = this.number - 1;
            const queryParams = this.params;
            var paramsStr = "?page=" + page + "&size=" + this.size;
            if (queryParams.keywords != null) {
                paramsStr = paramsStr + "&keywords=" + queryParams.keywords;
            }
            if (queryParams.status != null) {
                paramsStr = paramsStr + "&status=" + queryParams.status;
            }
            if (queryParams.startTime) {
                paramsStr = paramsStr + "&startTime=" + dateUtils.formatDate(queryParams.startTime, 'yyyy-MM-dd');
            }
            if (queryParams.endTime) {
                paramsStr = paramsStr + "&endTime=" + dateUtils.formatDate(queryParams.endTime, 'yyyy-MM-dd');
            }
            gooItemApi.getList(paramsStr).then((res) => {
                if (res.status == 200 && res.data != '') {
                    let resData = res.data;
                    this.tableData = resData.content;
                    this.totalPages = resData.totalPages;
                    this.totalElements = resData.totalElements;
                    this.size = resData.size;
                    this.listLoading = false;
                }
            }).catch((err) => {
                this.$notify.error({
                    titile: '加载商品数据异常',
                    message: err.errors_msg
                })
                this.listLoading = false;
            });
        },
        handlerStatusStyle(row) {
            switch (row.status) {
                case 'DEVELOPING':
                    return 'warning'
                    break;
                case 'UP_SHELF':
                    return 'success'
                    break;
                case 'DOWN_SHELF':
                    return 'gray'
                    break;
                default:
                    break;
            }
        },
        //格式化列表字段
        formatter(row, column) {
            switch (row.status) {
                case 'DEVELOPING':
                    return '设计中'
                    break;
                case 'UP_SHELF':
                    return '已上架'
                    break;
                case 'DOWN_SHELF':
                    return '已下架'
                    break;
                default:
                    break;
            }
        },
        //新增商品
        handleCreate() {
            this.$store.dispatch('doRemoveGooItem')
            this.$router.push('/gooProcess');
        },
        //编辑商品
        handleEdit(index, row) {
            if (row.id) {
                gooItemApi.getOne(row.id).then((res) => {
                    if (res.status == 200 && res.data != '') {
                        this.$store.dispatch('doSaveGooItem', res.data)
                        this.$router.push('/gooProcess');
                    }
                }).catch((err) => {
                    this.$notify.error({
                        title: '获取内容失败',
                        message: err.errors_msg
                    });
                });
            }
        },
        // 处理删除
        handleDelete(index, row) {
            this.$confirm('你确定删除嘛？此操作不可撤销!', '提示', {
                confirmButtonText: '诀别吧',
                cancelButtonText: '给你个机会',
                type: 'warning'
            }).then(() => {
                this.deleteOne(row.id);
            }).catch(() => {
                //取消
            })
        },
        deleteOne(gooItemId) {
            gooItemApi.deleteOne(gooItemId).then((res) => {
                if (res.status == 200) {
                    this.$notify({
                        title: '成功',
                        message: '删除商品成功！',
                        type: 'success'
                    });
                    this.loadData();
                }
            }).catch((err) => {
                this.$notify.error({
                    title: '删除商品失败！',
                    message: err.errors_msg
                })
            })
        }
    }
}
</script>
